<template>
	<layout>
		<uv-sticky bg-color="#F5F5F5" offset-top="0" customNavHeight="0">
			<uv-navbar :fixed="false" :safeAreaInsetTop="true" height="0" bgColor="transparent" leftIcon="" />
			<!-- #ifndef MP -->
			<!-- <blank size="10"></blank> -->
			<!-- #endif -->
		</uv-sticky>

		<blank size="10"></blank>
		<view class="container">
			<view class="banner">

				<view class="drop-down">
					<uv-drop-down ref="dropDown" sign="dropDown_1" :defaultValue="defaultValue"
						:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
						:extra-active-icon="{name:'arrow-up-fill',color:'#3c9cff',size:'26rpx'}" @click="selectMenu">
						<uv-drop-down-item name="order" type="2" :label="dropItem('order').tenantName"
							:value="dropItem('order').tenantId">
						</uv-drop-down-item>


						<uv-drop-down-item name="type" type="2" :label="currentModelName" :value="currentModelId">
						</uv-drop-down-item>
						<!-- 传统能耗 -->
						<template v-if="currentModelId == 5">
							<uv-drop-down-item name="traditionSystem" type="2" :label="activeTraditionName"
								:value="activeTraditionValue">
							</uv-drop-down-item>
						</template>

					</uv-drop-down>
					<template v-if="activeName"></template>
					<uv-drop-down-popup sign="dropDown_1" :click-overlay-on-close="true" key-name="tenantName"
						:currentDropItem="currentDropItem" @clickItem="clickItem" @popupChange="change">
					</uv-drop-down-popup>
				</view>
			</view>
			<view class="content">
				<view class="flex justify-between yshop-menu" v-if="navList && navList.length > 0">
					<view class="flex flex-column align-center yshop-menu-item " v-for="item in navList" :key="item.id"
						@click="takein(item)">
						<view class="nav-img">
							<image :src="item.icon" mode="aspectFit" class="img-01"></image>
						</view>
						<view class="nav-title">{{item.name}}</view>
					</view>
				</view>
				<view class="entrance">

					<uv-tabs :list="tabList" lineWidth="60" :current="currentTab" @click="tabClick"
						itemStyle="padding-left: 30px; padding-right: 30px; height: 34px;"></uv-tabs>
				</view>
				<view class="module-content">
					<!-- 概况 -->
					<template v-if="activeTab == globalConfig.tabName.overView">
						<component v-for="(item,index) in componentList" :key="item.id" :is="item.component"
							:list="overviewList" :modelData="componentData[index] || componentData"
							:activeTraditionId="activeTraditionId" :modelId="currentModelId" :parkId="currentParkId">
						</component>
					</template>
					<!-- 工单 -->
					<template v-if="activeTab == globalConfig.tabName.order">
						<OrderAnalysis></OrderAnalysis>
					</template>
					<!-- 设备 -->
					<template v-if="activeTab == globalConfig.tabName.device">
						<component v-for="(item,index) in componentList" :key="index" :is="item.component"></component>

					</template>

					<!-- 排名 -->
					<template v-if="activeTab == globalConfig.tabName.ranking">
						<component v-for="(item,index) in componentList" :key="index" :is="item.component"
							:list="rankingData" :title="item.name" :moduleId="currentModelId"
							:activeTraditionId="activeTraditionId">
						</component>
						<!-- <Ranking></Ranking> -->
						<!-- <PowerRanking></PowerRanking> -->
					</template>
				</view>


			</view>
		</view>
	</layout>
</template>

<script setup>
	import {
		computed,
		reactive,
		shallowRef,
		watch,
		ref
	} from 'vue'
	import {
		switchTenant,
		getModuleByPark
	} from "@/api/system"
	import {
		reqStoreBoard
	} from "@/api/model/storageEnergy.js"
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import cookie from "@/utils/cookie"
	import {
		menuAds
	} from '@/api/market'
	import boardMap from "@/utils/mapping/boardMap.js"
	import globalConfig from "@/utils/constant.js";
	import {
		storeToRefs
	} from 'pinia'
	import {
		useMainStore
	} from '@/store/store'
	import {
		reqWindBoard
	} from "@/api/model/windEnergy.js"
	import Overview from "@/pages/components/module/overview/overview.vue"
	import EnercySave from "@/pages/components/module/energySave/energySave.vue"
	import PowerPlan from "@/pages/components/module/powerPlan/PowerPlan.vue"
	import OrderAnalysis from "@/pages/components/module/orderAnalysis/OrderAnalysis.vue"
	import Ranking from "@/pages/components/module/ranking/Ranking.vue"
	import PowerRanking from "@/pages/components/module/powerRanking/PowerRanking.vue"
	import StationDistribution from "@/pages/components/module/stationDistribution/stationDistribution.vue"
	import * as testApi from "@/api/model/test";
	import * as totalApi from "@/api/model/parkTotal"
	import * as chargeApi from "@/api/model/chargingStation"
	import * as lightApi from "@/api/model/photovoltaic"
	import * as traditionApi from "@/api/model/trandition"
	import {
		Switch
	} from 'vant'
	const main = useMainStore()
	const {
		member,
		store,
		isLogin
	} = storeToRefs(main)

	const isActiveModule = shallowRef(Overview)
	//const store = ref(main.store)
	const navList = ref([]) //导航列表
	const componentData = ref([]) //用来存储接口返回的数据
	const listAds = ref([])
	const overviewList = ref([]) //概况数组
	const activeTab = ref('概况')
	let componentList = ref([])
	const currentTab = ref(0)
	const currentModelName = ref(null); //当前模块名称
	// const isLogin = ref(main.isLogin)
	// 表示value等于这些值，就属于默认值
	const defaultValue = ref([0, 5])
	const currentModelId = ref(null) //当前模块ID
	const currentParkId = ref(null) //当前园区ID
	const activeTraditionName = ref('') //当前选中传统能耗系统name
	let activeTraditionId = ref('')
	const activeTraditionValue = ref('') //当前选中传统能耗系统value
	const rankingData = ref([{
			position: 1,
			powerstationName: '南京华信大道',
			normalization: '30.27'
		},
		{
			position: 2,
			powerstationName: '吴经中学',
			normalization: '25.24'
		},
		{
			position: 3,
			powerstationName: '小长兴',
			normalization: '17.48'
		},
		{
			position: 4,
			powerstationName: '天津长春',
			normalization: '15.28'
		},
	]) //排名数据
	// 筛选结果
	const result = ref([{
			name: 'order',
			tenantName: '振华重工(总)',
			value: 'all'
		},
		{
			name: 'type',
			tenantName: '园区总览',
			value: 7
		},
	])
	const tabList = ref([{
			name: '概况',
		},
		{
			name: '工单',
		}, {
			name: '设备'
		},
		{
			name: '排名'
		}
	])
	const navTitle = ref('')
	const activeName = ref('type') //默认模块
	const data = reactive({
		order: {
			tenantName: '振华重工(总)',
			value: 'order',
			activeIndex: 0,
			color: '#333',
			activeColor: '#2878ff',
			child: [{
				tenantName: '园区1',
				value: 'all'
			}, ]
		},
		type: {
			tenantName: '模块11',
			value: 'type',
			activeIndex: 0,
			color: '#333',
			activeColor: '#2878ff',
			child: [{
				tenantName: '模块1',
				value: 'all1'
			}, {
				tenantName: '模块2',
				value: 'pdf'
			}]
		},

		traditionSystem: {
			tenantName: '系统1',
			value: 'traditionSystem',
			activeIndex: 0,
			color: '#333',
			activeColor: '#2878ff',
			child: [{
				tenantName: '电系统',
				value: 'ele'
			}]
		}

	})
	const change = () => {}
	//获取园区下拉框数据
	const getTenantList = async () => {
		let parkId = cookie.get('zh-h5-select-park'); //园区ID
		let localUserInfo = cookie.get('zh-h5-userInfo') || {}; //存储本地存储的信息
		const tenantList = Array.isArray(localUserInfo.tenantList) ? localUserInfo.tenantList : [] //园区数组
		if (!parkId) {

			parkId = tenantList[0].tenantId
			cookie.set('zh-h5-select-park', parkId); //园区ID
		}
		let modelId = cookie.get('zh-h5-select-module')

		data.order.child = [...tenantList] //园区选项


		await getModelListByPark(parkId); //根据园区ID获取模块

		// 获取当前存储园区ID回写
		let filterPark = localUserInfo.tenantList.filter((item) => item.tenantId == parkId)
		//园区默认第一项
		result.value[0].tenantName = filterPark[0].tenantName
		result.value[0].value = filterPark[0]?.tenantId

		let modleList = data.type.child[0] //默认模块第一项

		clickItem(modleList)

		data.traditionSystem.child = [{
				tenantName: '水系统',
				tenantId: 'water',

			},
			{
				tenantName: '电系统',
				tenantId: 'ele'
			},
			{
				tenantName: '燃气系统',
				tenantId: 'gas'
			},
			{
				tenantName: '重能耗',
				tenantId: 'heavy'
			},
			{
				tenantName: '其他能耗',
				tenantId: 'other'
			},
		]

		result.value[2].tenantName = data.traditionSystem.child[0]?.tenantName
		result.value[2].value = data.traditionSystem.child[0]?.tenantId
	}

	const tabClick = (item) => {
		console.log("选中-item", item)
		currentTab.value = item.index
		activeTab.value = item.name
		componentList.value = item.children
	}
	/**
	 * 点击每个筛选项回调
	 * @param {Object} e { name, active, type } = e
	 */
	const selectMenu = (e) => {
		const {
			name,
			active,
			type
		} = e;
		// console.log("选中菜单", name, active, type, currentDropItem)
		activeName.value = name;
		// type 等于1 的需要特殊处理：type不等于1可以忽略
		if (type == 1) {
			clickItem({
				name: 'vip_type',
				tenantName: 'VIP文档',
				value: e.active ? 1 : 0
			});
		} else if ((type == 2 && name == 'type') || type == 'order') {
			const find = result.value.find(item => item.name == activeName.value);
			if (find) {
				const findIndex = data[activeName.value].child.findIndex(item => item.tenantName == find.tenantName &&
					item.tenantId == find.value);
				// console.log("findIndex===", find, findIndex)
				data[activeName.value].activeIndex = findIndex;
			} else {
				data[activeName.value].activeIndex = 0;
			}
		} else if (type == 2 && name == 'traditionSystem') {
			// console.log("传统系统能耗")
		}
	}
	//根据园区获取模块的接口
	const getModelListByPark = async (parkId) => {
		try {
			let res = await getModuleByPark(parkId);
			if (!res?.data?.data) {
				console.error('获取模块数据失败', res);
				return;
			}

			let arr = res.data.data.map(item => {
				return {
					tenantName: item.name || '',
					tenantId: item.id || ''
				}
			})
			//更新数据
			data.type.child = arr
			currentModelName.value = arr[0].tenantName //回写园区下面模块的第一项

			// 5. 更新result中的值
			const firstModule = arr[0];
			if (result.value[1]) {
				result.value[1].tenantName = firstModule.tenantName;
				result.value[1].value = firstModule.tenantId;
			}
			if (result.value[2]) {
				result.value[2].tenantName = firstModule.tenantName;
				result.value[2].value = firstModule.tenantId;
			}
			activeName.value = 'type' //切换模块
			await pageChangeById(arr[0].tenantName, arr[0].tenantId) //模块ID
		} catch (error) {
			console.error('获取模块列表失败:', error);
		}

	}


	/**
	 * 点击菜单回调处理
	 * @param {Object} item 选中项 { label,value } = e
	 */
	const clickItem = async (e) => {
		// console.log("点击菜单", e, activeName.value)
		// 下面有重新赋值，所以用let
		let {
			tenantName,
			tenantId
		} = e;
		if (activeName.value == 'order') { //选择园区
			result.value[0].tenantName = tenantName
			result.value[0].value = tenantId
			getModelListByPark(tenantId);
		} else if (activeName.value == 'type') {
			currentModelName.value = tenantName ? tenantName : '';
		}

		if (tenantId == 5 || activeName.value == 'traditionSystem') { //传统能源 预览动态调整
			activeTraditionId.value = (tenantId == 5 ? data.traditionSystem.child[0].tenantId : tenantId)
			overviewList.value = globalConfig.tradtionOverviewMap[e.tenantId]

			activeTraditionName.value = tenantName == '传统能源' ? data.traditionSystem.child[0].tenantName : tenantName
			
			filterComponent(activeTraditionId.value)
			requestById(currentParkId.value, currentModelId.value, activeTraditionId.value)

		} else if (tenantId == 1) {
			let res = await reqWindBoard({})
			overviewList.value = boardMap.transformData(res.data.data.title)

		}

		pageChangeById(tenantName, tenantId) //根据模块ID

	}
	//过滤其他用途占比
	const filterComponent = (val) => {
		let list = componentList.value
		if (val == 'other') {
			componentList.value = componentList.value.filter(item => item.name != '用途占比')
		}

	}
	//刷新页面
	const refreshPage = () => {
		requestById(currentParkId.value, currentModelId.value, activeTraditionId.value)

	}
	const pageChangeById = async (tenantName, tenantId) => {

		if (activeName.value == 'type') { // 模块
			// console.log("首页---选中模块菜单", tenantName, tenantId)
			currentModelId.value = tenantId
			uni.setStorageSync('zh-h5-select-module', tenantId); //

			overviewByModel()

		} else if (activeName.value == 'order') { //order 园区
			// console.log("选中园区菜单", tenantName, tenantId)
			currentParkId.value = tenantId
			uni.setStorageSync('zh-h5-select-park', JSON.stringify(tenantId)); //
			let {
				data
			} = await switchTenant(tenantId) //切换园区重新获取token
			cookie.set('zh-h5-project-token', data.data.token) //刷新token
			refreshPage()

		}
		showModelByModel() //根据模块展示模型
		let obj = {
			name: tabList.value[0].name,
			children: tabList.value[0].children
		} //默认先展示第一个
		// console.log("当前园区-当前模块", currentParkId.value, currentModelId.value)
		tabClick(obj) //xxh
		navList.value = navByModelId(currentParkId.value, currentModelId.value) //根据园区和模块获取对应导航列表
		// console.log("导航列表", arr)
		requestById(currentParkId.value, currentModelId.value, activeTraditionId.value) //根据园区和模块ID 来触发对应接口
		const findIndex = result.value.findIndex(item => item.name == activeName.value);
		if (defaultValue.value.indexOf(tenantId) > -1 && data.order.tenantName) {
			tenantName = data.order.tenantName;
		}
		// 已经存在筛选项
		if (findIndex > -1) {
			result.value[findIndex] = {
				name: activeName.value,
				tenantName,
				value: tenantId
			}

		} else {
			result.value.push({
				name: activeName.value,
				tenantName,
				value: tenantId
			});
		}
		result.value = result.value.filter(item => defaultValue.value.indexOf(item.value) == -1);
	}
	const dropItem = computed((name) => {
		return (name) => {
			const result1 = {};
			const find = result.value.find(item => item.name === name);
			if (find) {
				result1.tenantName = find.tenantName;
				result1.value = find.value;
			} else {
				result1.tenantName = data[name].tenantName;
				result1.value = data[name].value;
			}
			return result1;
		}
	})
	// 获取当前下拉筛选项
	const currentDropItem = computed(() => {
		// console.log("currentName==", data[activeName.value], activeName.value)
		return data[activeName.value]
	})
	//根据园区ID 和模块id 调用相应请求
	const requestById = async (parkId, modelId, traditionId) => {

		let requests = null
		if (modelId == 7) { //园区总揽
			requests = totalApi.apiArr.map((item, index) => {
				return totalApi[item.value]().then((data) => {
					componentData.value[index] = data.data; // 更新对应的索引数据
					componentData.value[index].interface = item.value; // 根据接口名称 组件更新对应数据
					if (item.value == "reqHeadData") {
						overviewValueByModel(data.data.data) //根据模块给相对应的概况赋值
					}
				}).catch((error) => {
					componentData.value[index] = {}; // 请求失败时，返回空数据
				});
			});
			await Promise.all(requests); // 等待所有请求完成
		} else if (modelId == 4) { //充电桩
			requests = chargeApi.apiArr.map((item, index) => {
				return chargeApi[item.value]().then((data) => {
					componentData.value[index] = data.data; // 更新对应的索引数据

				}).catch((error) => {
					componentData.value[index] = {}; // 请求失败时，返回空数据
				});
			});
			await Promise.all(requests); // 等待所有请求完成
		} else if (modelId == 2) { //光伏
			requests = lightApi.apiArr.map((item, index) => {
				return lightApi[item.value]().then((data) => {
					componentData.value[index] = data.data; // 更新对应的索引数据
					if (item.value == "reqsituation") {

						lightOverviewByModel(data.data.data) //根据模块给相对应的概况赋值
					}
				}).catch((error) => {
					componentData.value[index] = {}; // 请求失败时，返回空数据
				});
			});
			await Promise.all(requests); // 等待所有请求完成
		} else if (modelId == 5) { //传统能耗
			traditionOverviewByModel(traditionId)

		} else if (modelId == 1) { //风机
			let res = await reqWindBoard({})
			overviewList.value = boardMap.transformData(res.data.data.title)
		} else if (modelId == 3) { //储能
			let res = await reqStoreBoard({})
			overviewList.value = boardMap.storagetransformData(res.data.data.title)
			componentData.value = res.data.data
		}
	};
	const traditionOverviewByModel = (traditionId) => {
		let isLoading = false; // 控制是否正在加载数据

		let viewData = null
		let map = {
			'water': 'reqTradtionWaterView',
			'ele': 'reqTradtionEleView',
			'gas': 'reqTradtionGasView',
			'heavy': 'reqTradtionWeightView',
			'other': 'reqTradtionOtherView',

		}
		traditionApi[map[traditionId]]().then(res => {
			viewData = res.data.data
			let titleToKeyMap = globalConfig.traditionViewMap[traditionId]
			// 根据 `title` 顺序赋值
			overviewList.value.forEach(item => {
				const key = titleToKeyMap[item.title]; // 获取对应的 `dataValues` 键
				if (key && viewData[key]) {
					item.value = viewData[key]; // 将 `dataValues` 中的值赋给 `value`
				}
			});
		})
	}
	//根据模块给相对应的概况赋值(总数据看板/分数据看板)
	const overviewValueByModel = (val) => {
		const titleToKeyMap = {
			"上月综合能耗等价值/当量值(吨标煤)": "one",
			"上月消耗总价(万元)": "two",
			"当年综合消耗等价值/当量值(吨标煤)": "three",
			"当年消耗总价(万元)": "four",
			"单位产量能耗(吨标煤/吨钢结构)": "five",
			"当年二氧化碳排放总量(tCO₂)": "six"
		};

		// 根据 `title` 顺序赋值
		overviewList.value.forEach(item => {
			const key = titleToKeyMap[item.title]; // 获取对应的 `dataValues` 键
			if (key && val[key]) {
				item.value = val[key]; // 将 `dataValues` 中的值赋给 `value`
			}
		});
	}
	//根据模块给相对应的概况赋值(光伏)
	const lightOverviewByModel = (val) => {
		const titleToKeyMap = {
			"当前总功率(kW)": "powergenerationCapacity",
			"总装机容量(kWp)": "installedCapacity",
			"当日发电量(MWh)": "dailyPowergeneration",
			"当月发电量(MWh)": "monthlyPowergeneration",
			"当年发电量(MWh)": "annualPowergeneration",
			"累计发电量(GWh)": "cumulativePowergeneration"
		};

		// 根据 `title` 顺序赋值
		overviewList.value.forEach(item => {
			const key = titleToKeyMap[item.title]; // 获取对应的 `dataValues` 键
			if (key || val[key]) {
				item.value = val[key]; // 将 `dataValues` 中的值赋给 `value`
			}
		});
	}



	/**
	 * 根据
	 */
	const navByModelId = (parkId, modelId) => {
		let arr = globalConfig.modelMapNav[modelId]
		return arr;
	}
	const handGetListAds = async () => {
		let shop_id = store.id ? store.id : 0;
		let data = await menuAds({
			shop_id: shop_id
		});
		if (data) {
			listAds.value = data.list;
			// console.log('listAds:', listAds.value)
			uni.setStorage({
				key: 'isActive',
				data: data.isActive
			});
			if (data.list.length > 0) {
				uni.setStorage({
					key: 'shopAd',
					data: data.list[0].image
				});
			}
		}
	}
	//nav导航点击事件
	const takein = (item) => {
		console.log("点击项", item)
		let {
			name
		} = item
		switch (name) {
			case "电站管理":
				uni.navigateTo({
					url: "/pages/components/pages/station/station"
				})
				break;

			case "告警管理":
				if (item.moduleId && item.moduleId == '1') {
					uni.navigateTo({
						url: "/pages/components/pages/alarm/windAlarm",
						success: (res) => {
							res.eventChannel.emit('getModelId', {
								modelId: currentModelId.value,
								traditionId: activeTraditionId.value
							})
						}
					})
					break;
				} else {
					uni.navigateTo({
						url: "/pages/components/pages/alarm/alarm",
						success: (res) => {
							res.eventChannel.emit('getModelId', {
								modelId: currentModelId.value,
								traditionId: activeTraditionId.value
							})
						}
					})
					break;
				}


			case "监控管理":
				uni.navigateTo({
					url: "/pages/components/pages/monitor/monitor",
					success: (res) => {
						res.eventChannel.emit('getModelId', {
							data: currentModelId.value
						})
					}
				})
				break;
			case "运维管理":
				uni.navigateTo({
					url: "/pages/components/pages/yunwei/operate",
					success: (res) => {
						res.eventChannel.emit('getModelId', {
							modelId: currentModelId.value,
							traditionId: activeTraditionId.value
						})
					}
				})
				break;
			case "订单管理":
				uni.navigateTo({
					url: "/pages/components/pages/orders/orders"
				})
				break;

			case "配额管理":
				uni.navigateTo({
					url: "/pages/components/pages/quotaManage/quotaManage"
				})
				break;

			case "资产管理":
				uni.navigateTo({
					url: "/pages/components/pages/assetManage/AssetManage"
				})
				break;

			case "交易管理":
				uni.navigateTo({
					url: "/pages/components/pages/transaction/Transaction"
				})
				break;


		}
	}


	const takeout = () => {
		main.SET_ORDER_TYPE('takeout')
		uni.switchTab({
			url: '/pages/menu/menu'
		})
	}

	const goScore = () => {
		uni.navigateTo({
			url: '/pages/components/pages/scoreproduct/list'
		})
	}
	//根据选择模块返回对应数据
	const overviewByModel = () => {
		let selectModelId = uni.getStorageSync('zh-h5-select-module')

		let res = globalConfig.modelMap[selectModelId]
		overviewList.value = res

		// console.log("返回的数组", res)
	}
	const showModelByModel = () => {
		let selectModelId = uni.getStorageSync('zh-h5-select-module')
		let selectParkId = uni.getStorageSync('zh-h5-select-park')

		if (selectModelId == 7 && selectParkId == 71) { //总揽《总数据看板》
			let res = globalConfig.showModelMap[selectModelId][0]

			tabList.value = res
		} else if (selectModelId == 7 && selectParkId != 71) { //总揽《分数据看板》
			let res = globalConfig.showModelMap[selectModelId][1]
			tabList.value = res

		} else {
			let res = globalConfig.showModelMap[selectModelId]
			tabList.value = res
		}
		console.log("对应模块", tabList.value)
	}

	watch(() => componentList.value, (newList) => {
		if (activeTraditionId.value == 'other') {
			componentList.value = componentList.value.filter(item => item.name != '用途占比')
		}
	}, {
		immediate: true,
		deep: true
	})
	watch(() => activeTraditionId.value, (val) => {
		console.log('activeTraditionId 更新为:', val);
	})
	onLoad(() => {
		console.log("选中的模块ID", uni.getStorageSync('zh-h5-select-module'))
		let selectParkId = uni.getStorageSync('zh-h5-select-park')
		overviewByModel()
		getTenantList()
		showModelByModel()
		getModelListByPark(selectParkId)
		// handGetListAds()
	})

	onShow(() => {
		// console.log("show==")
	})
</script>

<style lang="scss">
	.yshop-menu {
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		/* 子元素之间有间距 */
		align-items: stretch;
		/* 子元素高度等于父元素的高度 */
		width: 100%;
		/* 父元素宽度占满父容器 */
		height: 174rpx;
		/* 设置父元素的高度 */
		gap: 10px;

	}

	.yshop-menu-item {
		background-color: #ffffff;
		// width: 160rpx;
		// padding-bottom: 8rpx;
		flex: 1 1 0;
		/* 子元素等比例缩小 */
		// background-color: lightblue;
		height: 100%;
		/* 子元素高度占满父元素 */

		/* 可选，用于查看子元素边界 */

		.nav-img {
			margin-bottom: 8rpx;
			padding-bottom: 0.25rem;
			flex: 1 1 0;
			// background-color: lightblue;
			height: 100%;
			margin: 5px;
			width: 100%;
			text-align: center;

			.img-01 {
				// width: 100px;
				// height: 100rpx;
				// margin-top: 30rpx;
				width: 100%;
				/* 图片宽度占满子元素 */
				height: 100%;
				max-width: 100px;
				max-height: 100rpx;
				/* 图片高度占满子元素 */
				object-fit: contain;
				/* 保持图片的比例，且不超过子元素 */
				object-position: center;
			}
		}

		.nav-title {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}
	}

	.index-img {
		width: 120px;
		height: 120rpx;
		position: relative;
		left: -20rpx
	}

	.img-01 {
		// width: 100px;
		// height: 100rpx;
		// margin-top: 30rpx;
		width: 100%;
		/* 图片宽度占满子元素 */
		height: 100%;
		max-width: 100px;
		max-height: 100rpx;
		/* 图片高度占满子元素 */
		object-fit: contain;
		/* 保持图片的比例，且不超过子元素 */
		object-position: center;
	}

	.img-02 {
		width: 110px;
		height: 110rpx;
		margin-top: 20rpx;
	}


	/* #ifdef H5 */
	page {
		height: auto;
		min-height: 100%;
	}

	/* #endif */
	page {
		background-color: #f0f1f4 !important;
	}

	.banner {
		// position: relative;
		// width: 100%;
		// //height: 300rpx;
		height: 60rpx;

		.test {
			display: flex;
			justify-content: space-between;
			/* 子元素之间有间距 */
			align-items: stretch;
			/* 子元素高度等于父元素的高度 */
			width: 100%;
			/* 父元素宽度占满父容器 */
			height: 300px;
			/* 设置父元素的高度 */
			gap: 10px;
			/* 子元素之间的间距 */
			border: 2px solid black;

			/* 可选，用于查看父元素边界 */
			.child {
				flex: 1 1 0;
				/* 子元素等比例缩小 */
				background-color: lightblue;
				height: 100%;
				/* 子元素高度占满父元素 */
				margin: 5px;
				/* 子元素之间的间距 */
				border: 1px solid red;
				/* 可选，用于查看子元素边界 */

				.img-01 {
					width: 100%;
					/* 图片宽度占满子元素 */
					height: 100%;
					max-width: 100px;
					max-height: 100rpx;
					/* 图片高度占满子元素 */
					object-fit: contain;
					/* 保持图片的比例，且不超过子元素 */
					object-position: center;
					/* 图片居中显示 */
				}
			}
		}

		.bg {
			width: 100%;
			height: 300rpx;
		}

		.intro {
			position: absolute;
			top: calc(50rpx + var(--status-bar-height));
			left: 40rpx;
			color: #FFFFFF;
			display: flex;
			flex-direction: column;

			.greet {
				font-size: $font-size-lg;
				margin-bottom: 10rpx;
			}

			.note {
				font-size: $font-size-sm;
			}
		}
	}

	.drop-down {
		position: fixed;
		height: 60rpx;
		width: 100%;
		top: 0;
		background-color: #f0f0f0;
		z-index: 9;
	}

	.content {
		padding: 0 10rpx;
	}

	.entrance {
		position: relative;
		//top:0;
		margin-top: 10rpx;
		// margin-bottom: 30rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		box-shadow: $box-shadow;
		// padding: 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		// border-radius: 50rpx;

		.item {
			//flex: 1;
			display: flex;
			//flex-direction: column;
			justify-content: center;
			//align-items: center;
			position: relative;

			&:nth-child(1):after {
				content: '';
				position: absolute;
				width: 1rpx;
				background-color: #ddd;
				right: 0;
				height: 100%;
				transform: scaleX(0.5) scaleY(0.8);
			}

			.icon {
				font-size: 90rpx;
				// color: #5A5B5C;
				color: #09b4f1;
			}

			.title {
				font-size: 30rpx;
				color: $text-color-base;
				font-weight: 600;
			}
		}
	}

	.module-content {
		.module1-container {
			margin-top: 0;
		}
	}

	.info {
		position: relative;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		box-shadow: $box-shadow;
		//padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.integral_section {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.top {
				display: flex;
				align-items: center;

				.title {
					color: $text-color-base;
					font-size: $font-size-base;
					margin-right: 10rpx;
				}

				.value {
					font-size: 44rpx;
					font-weight: bold;
				}
			}

			.bottom {
				font-size: $font-size-sm;
				color: $text-color-assist;
				display: flex;
				align-items: center;
			}
		}

		.qrcode_section {
			color: $color-primary;
			display: flex;
			//flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-size-sm;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 10rpx;
			}
		}
	}
</style>